<template>
  <div class="channel">
    <van-nav-bar title="设置线下报名渠道来源" left-arrow @click-left="$router.push('/myCompany/companyHome')">
    </van-nav-bar>
    <div class="channelBox">
      <div class="title">可用列表</div>
      <div class="list" v-if="listData.length > 0">
        <div class="item" v-for="(item, index) in listData" :key="index">
          <div class="codeDiv">
            <div class='code'>设置线下报名渠道来源码</div>
            <div class="right">
              <span>{{item.work_num}}</span>
              <!-- <van-button icon="replay" size="small" type="primary">确定设置</van-button> -->
              <!-- <van-icon name="replay" @click="replay(item)" class="replay-icon">设置</van-icon> -->
              <!-- <van-button size="small" type="primary" @click="useCode()">确定使用</van-button> -->
            </div>
          </div>
          <div class="down">
            <div class="left">
              <div class="top">
                <div class="text">渠道公司：{{ item.channel_name }}</div>
              </div>
              <div class="bottom">
                <div class="text">渠道人：{{ item.channel_emp_name }}</div>
                <van-button plain type="warning" size="mini" @click="changeState(false, item.id)">禁用</van-button>
              </div>
              <!-- <div class="bottom">
                <div class="text">招聘员工人数：1</div>
                <van-button plain type="warning" size="mini" @click="changeState(false, item.id)">查看</van-button>
              </div> -->
            </div>
            <!-- <div class="right">
              <van-button plain type="warning" size="mini" @click="changeState(false, item.id)">禁用</van-button>
            </div> -->
          </div>
          
        </div>
      </div>
      <div v-else>暂无数据</div>
      <div class="title" style="margin-top:8px;">以下来源不可用</div>
      <div class="list" v-if="listJyData.length > 0">
        <div class="item" v-for="(item, index) in listJyData" :key="index">
          <div class="left">
            <div class="top">
              <div class="label">渠道公司：</div>
              <div class="text">{{ item.channel_name }}</div>
            </div>
            <div class="bottom">
              <div class="label">渠道人：</div>
              <div class="text">{{ item.channel_emp_name }}</div>
            </div>
          </div>
          <div class="right">
            <van-button plain type="primary" size="mini" @click="changeState(true, item.id)">启用</van-button>
          </div>
        </div>
      </div>
      <div v-else>暂无数据</div>
    </div>
    <div class="handleBox">
      <van-button type="primary" size="normal" @click="() => (show = true)">新增线下报名渠道来源</van-button>
    </div>
    <van-dialog
      v-model="show"
      title="新增线下报名渠道来源"
      show-cancel-button
      :before-close="beforeClose"
      @confirm="confirmFrom"
      @closed="closed"
    >
      <van-form ref="formRef" @submit="onSubmit">
        <van-field
          v-model="gsFormCom"
          name="渠道公司"
          label="渠道公司"
          placeholder="渠道公司"
          :rules="[{required: true, message: '请填写渠道公司'}]"
        />
        <van-field
          v-model="gsFormName"
          name="渠道人"
          label="渠道人"
          placeholder="渠道人"
          :rules="[{required: true, message: '请填写渠道人'}]"
        />
      </van-form>
    </van-dialog>
  </div>
</template>
<script>
import {Dialog} from 'vant'
import {Toast} from 'vant'
export default {
  name: 'channel',
  data() {
    return {
      verify_code:'',
      gsFormCom: '',
      gsFormName: '',
      show: false,
      radioVal: 1,
      listData: [],
      listJyData: []
    }
  },
  methods: {
    // 生成来源吗
    async replay(value) {
      const {data: dataTrue} = await this.$api.company.getQode({
        id:value.id
      })
      console.log(dataTrue)
      Toast('设置成功!')
      this.getData()
    },
    async getData() {
      const {data: dataTrue} = await this.$api.company.getinfos({
        company_id: this.$route.query.companyId,
        is_enbale: true
      })
      this.listData = dataTrue.items
      const {data: dataFalse} = await this.$api.company.getinfos({
        company_id: this.$route.query.companyId,
        is_enbale: false
      })
      this.listJyData = dataFalse.items
    },
    changeState(flag, id) {
      let title = ''
      if (flag) {
        title = '是否启用这个来源'
      } else {
        title = '是否禁用这个来源'
      }
      Dialog.confirm({
        title
      })
        .then(async () => {
          await this.$api.company.setenablestatus({
            ChannelId: id,
            IsEnable: flag
          })
          this.getData()
        })
        .catch(() => {
          // on cancel
        })
    },
    async confirmFrom() {
      this.$refs.formRef.submit()
      await this.$api.company.addcompanychannel({
        CompanyID: this.$route.query.companyId,
        ChannelName: this.gsFormCom,
        ChannelEmpName: this.gsFormName
      })
      this.getData()
    },
    beforeClose(action, done) {
      if (action === 'confirm') {
        done(false)
      } else {
        done()
      }
    },
    onSubmit(values) {
      if (values) {
        this.show = false
      }
    },
    closed() {
      this.gsFormCom = ''
      this.gsFormName = ''
    }
  },
  mounted() {
    this.getData()
  }
}
</script>
<style lang="less">
.channel {
  position: relative;
  .channelBox {
    padding: 8px;
    .title {
      font-size: 14px;
      color: rgba(69, 90, 100, 0.6);
      margin-bottom: 8px;
    }
    .list {
      .item {
        padding: 12px;
        background-color: #fff;
        border-radius: 8px;
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
        margin-bottom: 8px;
        .codeDiv {
          display:flex;
          align-items:center;
          justify-content: space-between;
          font-size:14px;
          margin-bottom:5px;
          .code{
            color:#000;
          }
          .right{
            display:flex;
            align-items:center;
            span{
             
            }
            .replay-icon{
              margin-right:8px;
            }
          }
          
        }
        .down{
          display: flex;
          justify-content: space-between;
          align-items: center;
          .left {
            width: 100%;
            .top,
            .bottom {
              display: flex;
              justify-content: space-between;
              font-size: 14px;
              flex-wrap: wrap;
              padding:3px 0;
            }
            .top {
              margin-bottom: 4px;
            }
          }
        }
        
      }
    }
  }
  .handleBox {
    position: fixed;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    padding: 8px 0;
    display: flex;
    justify-content: center;
    .van-button {
      width: 300px;
      border-radius: 8px;
    }
  }
}
</style>
